<template>
  <div class="container">
    首页
    <div style="width: 100%;">
<!--      <infinite-scroll :data-source="articleList" :show-loading-more="loadMore" :is-loading="isLoading" @load-more="handleLoadMore"></infinite-scroll>-->
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { IListPagination } from '@/models/list-pagination.model';

  @Component
  export default class HomePage extends Vue {
    articleList: any[] = [];
    loadMore: boolean = false;
    isLoading: boolean = false;

    private pageIndex: number = 1;
    private pageSize: number = 3;

    async getArticleList(options: { pageIndex: number }): Promise<any> {
      this.isLoading = true;
      const params = {
        pageIndex: options.pageIndex,
        pageSize: this.pageSize,
      };
      this.$axios.get<IListPagination<any>>('/blog/article/list', { params }).then((result: any) => {
        this.articleList = [...this.articleList, ...result.items];
        this.pageIndex = result.pageIndex;
        this.loadMore = result.pageIndex < result.pageCount;
        this.isLoading = false;
      });
    }

    handleLoadMore(): void {
      this.getArticleList({ pageIndex: ++this.pageIndex });
    }

    private created(): void {
      this.getArticleList({ pageIndex: this.pageIndex });
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    margin: 0 auto;
    min-height: 100vh;
  }
</style>
